<template>
  <div class="dashboard-container">
    <div v-if='now_time.getHours()>=6&&now_time.getHours()<=11' class="one">早上好：{{userInfo.realname}}</div>
    <div v-else-if="now_time.getHours()>11&&now_time.getHours()<=14" class="two">中午好：{{userInfo.realname}}</div>
    <div v-else-if="now_time.getHours()>14&&now_time.getHours()<=18" class="three">下午好：{{userInfo.realname}}</div>
    <div v-else class="four">夜深了，早点休息：{{userInfo.realname}}</div>
    <!-- 判断当前时间是上午还是下午 -->
  

  </div>
</template>

<script>
import axios from '@/http/axios'
export default {
  data(){
    return {
      userInfo:{}
    }
  },
  created(){
    var token = localStorage.getItem('token')
    this.findUserInfo(token)
    this.now_time=new Date()
  },
  methods:{
    // 查询用户信息
    findUserInfo(token){
      // 1. 封装参数
      var obj = {
        token
      }
      axios({
        url:'http://121.199.29.84:8001/user/info',
        method: 'GET',
        params:obj,
      }).then((res)=>{
        this.userInfo = res.data.data
        // console.log(res.data.data)
        // 把用户头像存放到浏览器
        localStorage.setItem('userFace',res.data.data.userFace)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard-container{
  position: absolute;
  top:0;
  bottom: 0;
  width: 100%;
  margin:10px;
  height: 100%;
  background-image: url('https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1600655158&di=8de97ae46f9a1eef4a4a331a825b4fc0&src=http://5b0988e595225.cdn.sohucs.com/images/20190801/3df35a63dcc1400f9913833cfa8bbf71.png');
}

.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
.one,.two,.three,.four{
  size: 60px;
  color:seagreen;
  height: 100%;
  font-family: 'HYXinHaiXingKaiW.ttf';
}

</style>
